<template>
  <div class="relation-chart">
    <div class="relation-header">
      <div class="status-grade">
        <div v-for="(item, index) in statusEnum" :key="index">
          <a-tooltip :content="item.describe" position="bottom" :content-style="{ color: item.color }">
            <div class="status-item" :style="{ color: item.color }">
              <span :style="{ background: item.color }"></span>
              {{ item.label }}
            </div>
          </a-tooltip>
        </div>
      </div>
      <a-radio-group v-model="expandLevel" @change="changeLevel" class="grade" type="button" size="small">
        <a-radio :value="0">一级</a-radio>
        <a-radio :value="1">二级</a-radio>
        <a-radio :value="2">三级</a-radio>
      </a-radio-group>
    </div>
    <div class="card-chart">
      <VChart ref="myChart" style="height: 100%; width: 100%" :option="option" autoresize @click="handleChartClick" />
    </div>
    <!--<div class="progress-bar">
      <time-play @changeDataSource="changeDataSource"></time-play>
    </div>-->
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, toRefs, defineProps } from 'vue'
import { useHealthStoreHook } from '@/store/modules/health'
import timePlay from '@/components/timePlay/index.vue'
import VChart from 'vue-echarts'

const myChart = ref()

const props = defineProps({
  dataSource: {
    type: Object,
    default: () => {}
  },
  statusEnum: {
    type: Array,
    default: () => []
  },
  getHistoryList: {
    type: Function,
    required: true
  },
  initChartData: {
    type: Function,
    required: true
  }
})
const { dataSource } = toRefs(props)
const { changeDescribeContent } = useHealthStoreHook()
const expandLevel = ref(2)
const changeLevel = (val) => {
  if (typeof val === 'number') {
    option.series[0].center = undefined
    option.series[0].zoom = 1
  }
  updateOption(option, dataSource.value.list)
}
const updateHistoryList = (id) => {
  props.getHistoryList(id)
}
watch(props.dataSource, () => {
  updateOption(option, dataSource.value.list)
})
const option = reactive({
  series: [
    {
      type: 'tree',
      itemStyle: {
        color: 'blue',
        borderColor: 'green',
        borderWidth: 5
      },
      initialTreeDepth: 1, // 展开到第几级别
      data: [],
      zoom: 1, // 当前视角的缩放比例
      roam: true, // 是否开启平游或缩放
      scaleLimit: {
        // 滚轮缩放的极限控制
        min: 0.5,
        max: 5
      },
      symbolSize: 15,
      label: {
        position: 'left',
        verticalAlign: 'middle',
        align: 'right',
        fontSize: 14,
        color: '#333',
        borderColor: '#48f807',
        borderWidth: 2,
        padding: 2
      },
      lineStyle: {
        color: 'rgb(7,119,248)',
        width: 2
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left',
          fontSize: 14
        }
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
})
const initChart = () => {
  updateOption(option, dataSource.value.list)
}
const handleChartClick = (params) => {
  const { level } = params?.data
  expandLevel.value = +level > 2 ? 2 : level
  updateHistoryList(params?.data?.id)
  changeDescribeContent(params.data)
}
const updateOption = (option, data) => {
  option.series[0].data[0] = data
  option.series[0].initialTreeDepth = expandLevel
}
const changeDataSource = (data) => {
  updateOption(option, data)
}
onMounted(() => {
  initChart()
})
</script>

<style lang="less" scoped>
.relation-chart {
  width: 100%;
  height: 100%;

  .manual {
    width: 100px;
    height: 30px;
    font-size: 16px;
    font-weight: 650;
    text-align: center;
    line-height: 30px;
    background: rgba(1, 118, 167, 1);
    position: fixed;
    right: 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 2;
  }

  .relation-header {
    display: flex;
    justify-content: space-between;

    .status-grade {
      display: flex;

      .status-item {
        margin-left: 15px;
        position: relative;

        span {
          display: inline-block;
          width: 15px;
          height: 10px;
        }
      }
    }

    .grade {
      width: 240px;
      border-radius: 4px;
      border: 1px solid rgba(0, 119, 169, 1);
      background: transparent;

      .arco-radio-button {
        width: 80px;
        text-align: center;
        color: #0077a9;

        &:hover {
          background: #0077a9;
          color: #fff;
        }
      }

      .arco-radio-checked {
        background: rgba(1, 118, 167, 1);
        color: #fff;
        font-weight: 500;
      }
    }
  }

  .tooltip-item-title {
    color: #01e4f8;
  }

  .card-chart {
    height: calc(100% - 38px);
    width: 100%;
    margin: 12px 0;
    border-radius: 4px;
    background: #cedee8;
  }
}
</style>
